<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Werewolf Host</title>
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  </head>
  <body>
    <div class="panel panel-default" id="view_config">
      <div class="panel-body">
        <div id="view_config_detail" class="hide">
          <div class="form-group">
            <label>平民</label>
            <select class="form-control" id="n_o" />
              <option>0</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
              <option>6</option>
              <option>7</option>
              <option>8</option>
              <option>9</option>
              <option>10</option>
            </select>
          </div>
          <div class="form-group">
            <label>狼人</label>
            <select class="form-control" id="n_x" />
              <option>0</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
              <option>6</option>
              <option>7</option>
              <option>8</option>
              <option>9</option>
              <option>10</option>
            </select>
          </div>
          <div class="checkbox"><label><input type="checkbox" id="ch_S"/>预言家</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_W"/>女巫</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_H"/>猎人</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_F"/>白痴</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_G"/>守卫</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_B"/>熊</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_U"/>野孩子</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_O"/>长老</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_C"/>乌鸦</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_P"/>锈剑骑士</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_D"/>两姐妹 (2人)</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_Q"/>丘比特</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_T"/>盗贼</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_E"/>替罪羊</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_s"/>贪睡狼</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_g" disabled />大野狼</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_i" disabled />祖狼</label></div>
          <div class="checkbox"><label><input type="checkbox" id="ch_f" disabled/>吹笛者</label></div>
          <div class="form-group">
            <label>其他</label>
            <div class="checkbox"><label><input type="checkbox" id="ch_r_1"/>未知村规</label></div>
          </div>
        </div>
        <button class="btn btn-default" id="btn_config_switch">显示</button>
        <button class="btn btn-default" id="btn_config">配置</button>
      </div>
    </div>
    <div class="panel panel-default" id="view_game_control">
      <div class="panel-body">
        <div class="form-group">
          <label>参加人员</label>
          <div><table class="table table-striped">
            <thead><th>IP</th><th>代号</th><th>&nbsp;</th></thead>
            <tbody id="tbl_players"></tbody>
          </table></div>
          <div class="hide">
             <button class="btn btn-default" id="btn_confirm_config">显示角色统计</button>
             <span class="hide" id="txt_roles"></span>
          </div>
        </div>
        <div>
          <button class="btn btn-default" id="btn_refresh">刷新</button>
          <div class="btn-group">
            <button class="btn btn-default" id="btn_init">重新开始</button>
            <button class="btn btn-default" id="btn_daylight">白天</button>
          </div>
        </div>
        <br/>
        <div class="form-group">
          <label>第一夜</label>
          <div><div class="btn-group">
            <button class="btn btn-default" id="btn_theif">盗贼</button>
            <button class="btn btn-default" id="btn_cupid">丘比特</button>
            <button class="btn btn-default" id="btn_wildchild">野孩子</button>
          </div></div>
        </div>
        <div class="form-group">
          <label>黑夜</label>
          <div><div class="btn-group">
            <button class="btn btn-default" id="btn_werewolf">狼人</button>
            <button class="btn btn-default hide" id="btn_greedywolf">大野狼</button>
            <button class="btn btn-default hide" id="btn_infectwolf">祖狼</button>
            <button class="btn btn-default" id="btn_seer">预言家</button>
            <button class="btn btn-default" id="btn_witch">女巫</button>
            <button class="btn btn-default" id="btn_guard">守卫</button>
            <button class="btn btn-default" id="btn_crow">乌鸦</button>
            <button class="btn btn-default" id="btn_sisters">两姐妹</button>
            <button class="btn btn-default hide" id="btn_fluteman">吹笛者</button>
          </div></div>
        </div>
        <div class="form-group">
          <label>白天</label>
          <div><div class="btn-group">
            <button class="btn btn-default" id="btn_vote">投票</button>
            <button class="btn btn-default" id="btn_result">伤亡</button>
            <button class="btn btn-default" id="btn_test_play">音效</button>
          </div></div>
        </div>
        <div class="form-group">
          <label>信息</label>
          <div class="form-control-static" id="txt_info">
            ____
          </div>
        </div>
        <div class="form-group hide" id="view_vote">
          <label>投票</label>
          <div>
            <select class="form-control" id="sel_from"></select> 投票给
            <select class="form-control" id="sel_to"></select>
            <div class="btn-group">
              <button class="btn btn-default" id="btn_vote_one">投票</button>
              <button class="btn btn-default" id="btn_vote_calc">结算</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="hide" ><audio id="sound_bar" src="play.wav"></div>
    <script type="text/javascript" src="common.js"></script>
    <script>
       var component = null,
           env = {};

       function state_set_factory(state, callback) {
          return function (evt) {
             ajax({
                url: '/api/werewolf/state',
                data: { state: state }
             }, function () {
                green_border(evt.target);
                if (state !== ' ') setTimeout(start_one_role_monitor, 1000);
                if(callback) callback();
             }, function () {
                red_border(evt.target);
             });
          }
       }

       function generate_tbl_players(players) {
          var component = document.getElementById('tbl_players');
          clear_element(component);
          players.forEach(function (p) {
             var tr = document.createElement('tr'),
                 td, btn;
             tr._data = p.ip;
             td = document.createElement('td');
             td.appendChild(document.createTextNode(p.ip));
             tr.appendChild(td);
             td = document.createElement('td');
             td.appendChild(document.createTextNode(p.name));
             tr.appendChild(td);
             td = document.createElement('td');
             btn = document.createElement('button');
             btn.appendChild(document.createTextNode('注销'));
             btn.className = 'btn btn-default btn_unregister';
             td.appendChild(btn);
             btn = document.createElement('button');
             btn.appendChild(document.createTextNode('复活'));
             btn.className = 'btn btn-default btn_live';
             td.appendChild(btn);
             btn = document.createElement('button');
             btn.appendChild(document.createTextNode('死亡'));
             btn.className = 'btn btn-default btn_die';
             td.appendChild(btn);

             btn = document.createElement('button');
             btn.appendChild(document.createTextNode('上移'));
             btn.className = 'btn btn-default btn_up';
             td.appendChild(btn);
             btn = document.createElement('button');
             btn.appendChild(document.createTextNode('下移'));
             btn.className = 'btn btn-default btn_down';
             td.appendChild(btn);

             tr.appendChild(td);
             component.appendChild(tr);
          });
       }

       $('btn_config_switch').on('click', function (evt) {
          var c = document.getElementById('view_config_detail');
          if (c.classList.contains('hide')) {
             c.classList.remove('hide');
             evt.target.innerHTML = '隐藏';
          } else {
             c.classList.add('hide');
             evt.target.innerHTML = '显示';
          }
       });
       $('btn_config').on('click', function (evt) {
          var data = {
             o: parseInt(document.getElementById('n_o').value, 10),
             x: parseInt(document.getElementById('n_x').value, 10),
             S: document.getElementById('ch_S').checked?1:0,
             H: document.getElementById('ch_H').checked?1:0,
             F: document.getElementById('ch_F').checked?1:0,
             G: document.getElementById('ch_G').checked?1:0,
             B: document.getElementById('ch_B').checked?1:0,
             U: document.getElementById('ch_U').checked?1:0,
             O: document.getElementById('ch_O').checked?1:0,
             C: document.getElementById('ch_C').checked?1:0,
             P: document.getElementById('ch_P').checked?1:0,
             Q: document.getElementById('ch_Q').checked?1:0,
             T: document.getElementById('ch_T').checked?1:0,
             E: document.getElementById('ch_E').checked?1:0,
             g: document.getElementById('ch_g').checked?1:0,
             i: document.getElementById('ch_i').checked?1:0,
             s: document.getElementById('ch_s').checked?1:0,
             f: document.getElementById('ch_f').checked?1:0,
             D: document.getElementById('ch_D').checked?2:0
          };
          env.config = data;
          ajax({
             url: '/api/werewolf/config',
             data: data
          }, function () {
             green_border(evt.target);
          }, function () {
             red_border(evt.target);
          });
       });

       var cache_players = {};
       $('btn_refresh').on('click', function (evt) {
          ajax({
             url: '/api/werewolf/info'
          }, function (info) {
             cache_players = {};
             cache_players.order = info.players.map(function (x) {return x.ip;});
             info.players.forEach(function (x) {cache_players[x.ip] = x;});
             green_border(evt.target);
             generate_tbl_players(info.players);
             generate_players(false, info.players, document.getElementById('sel_from'));
             generate_players(true, info.players, document.getElementById('sel_to'));
             component = document.getElementById('txt_roles');
             component.classList.add('hide');
             component.parentNode.classList.remove('hide');
             env.config = info.config || {};
             aggregate_roles();
          }, function () {
             red_border(evt.target);
          });
       });

       $('btn_confirm_config').on('click', function (evt) {
          component = document.getElementById('txt_roles');
          component.classList.remove('hide');
       });

       function aggregate_roles() {
          var roles = {}, count = 0, str = null,
              match_diff = {}, match = false;
          if (!env.config) env.config = {};
          for (var ip in cache_players) {
             if (ip === 'order') continue;
             var p = cache_players[ip];
             if (!p) continue;
             if (roles[p.role]) {
                roles[p.role] ++;
             } else {
                roles[p.role] = 1;
             }
             count ++;
          }
          str = '目前共有' + count + '人加入; ';
          if (!env.config.T) {
             for (var role in env.config) {
                if (roles[role]) {
                   str += player_role_name(role) + ': ' + roles[role] + '; ';
                }
             }
          }
          for (var role in env.config) {
             if (env.config[role] !== roles[role]) {
                match_diff[role] = Math.abs(env.config[role] - (roles[role] || 0));
             }
          }
          if (!env.config || !Object.keys(match_diff).length) {
             str += '没有初始配置;';
          } else {
             var diff_count =
                match = Object.keys(match_diff).map(function (x) {
                   return match_diff[x];
                }).reduce(function (x,y) {
                   return x + y;
                });
             if (env.config.T) {
                // probably but not exact
                match = diff_count === 2;
             } else {
                match = diff_count === 0;
             }
             if (match) {
                str += '所有人准备就绪;';
             } else {
                str += '角色人数和配置不匹配;';
             }
          }
          component = document.getElementById('txt_roles');
          component.innerHTML = str;
       }

       function player_move_up(btn) {
          var tr = btn.parentNode.parentNode,
              tbody = tr.parentNode,
              trup = tr.previousSibling,
              ip = tr._data,
              order = cache_players.order,
              i = order.indexOf(ip), t;
          if (i <= 0 || i >= order.length) return;
          t = order[i];
          order[i] = order[i-1];
          order[i-1] = t;
          ajax({
             url: '/api/werewolf/reorder',
             data: {'seq': order.map(ip_encode).join(',')}
          }, function () {
             green_border(btn);
          }, function () {
             red_border(btn);
          });
          tbody.removeChild(tr);
          tbody.insertBefore(tr, trup);
       }

       function player_move_down(btn) {
          var tr = btn.parentNode.parentNode,
              tbody = tr.parentNode,
              trdw = tr.nextSibling,
              ip = tr._data,
              order = cache_players.order,
              i = order.indexOf(ip), t;
          if (i < 0 || i >= order.length - 1) return;
          t = order[i];
          order[i] = order[i+1];
          order[i+1] = t;
          ajax({
             url: '/api/werewolf/reorder',
             data: {'seq': order.map(ip_encode).join(',')}
          }, function () {
             green_border(btn);
          }, function () {
             red_border(btn);
          });
          tbody.removeChild(tr);
          trdw = trdw.nextSibling;
          if (trdw) {
             tbody.insertAfter(tr, trdw);
          } else {
             tbody.appendChild(tr);
          }
       }

       $('tbl_players').on('click', function (evt) {
          var klass = evt.target.classList,
              component = evt.target.parentNode,
              ip = component.parentNode._data;
          if (klass.contains('btn_up')) {
             player_move_up(evt.target);
          } else if (klass.contains('btn_down')) {
             player_move_down(evt.target);
          } else if (klass.contains('btn_die')) {
             ajax({
                url: '/api/player/alive',
                data: {ip: ip_encode(ip), alive: 0}
             }, function () {
                green_border(evt.target);
             }, function () {
                red_border(evt.target);
             });
          } else if (klass.contains('btn_live')) {
             ajax({
                url: '/api/player/alive',
                data: {ip: ip_encode(ip), alive: 1}
             }, function () {
                green_border(evt.target);
             }, function () {
                red_border(evt.target);
             });
          } else if (klass.contains('btn_unregister')) {
             ajax({
                url: '/api/player/unregister',
                data: { ip: ip_encode(ip) }
             }, function () {
                green_border(evt.target);
                component.parentNode.parentNode.removeChild(component.parentNode);
                delete cache_players[ip];
                var index = cache_players.order.indexOf(ip);
                if (index >= 0) {
                   cache_players.order.splice(index, 1);
                }
                component = document.getElementById('txt_roles');
                component.classList.add('hide');
                aggregate_roles();
             }, function () {
                red_border(evt.target);
             });
          }
       });

       $('btn_result').on('click', function (evt) {
          ajax({
             url: '/api/werewolf/night'
          }, function (info) {
             green_border(evt.target);
             component = document.getElementById('txt_info');
             clear_element(component);
             component.appendChild(document.createTextNode(info.info));
          }, function () {
             red_border(evt.target);
          });
       });

       var vote = {}, bigvote = null;
       $('btn_vote').on('click', function (evt) {
          ajax({url: '/api/werewolf/bigvote'}, function (info) {
             green_border(evt.target);
             bigvote = info.bigvote;
             component = document.getElementById('view_vote');
             component.classList.remove('hide');
          }, function () {
             red_border(evt.target);
          });
          vote = {};
       });
       $('btn_vote_one').on('click', function () {
          var f, t;
          f = document.getElementById('sel_from').value;
          t = document.getElementById('sel_to').value;
          if (!vote[t]) vote[t] = 1; else vote[t] ++;
          if (bigvote === f) vote[t] ++;
       });
       $('btn_vote_calc').on('click', function () {
          var m = '';
          Object.keys(vote).forEach(function (x) {
             m += '（请自行增加警长的票）';
             m += cache_players[x].name + ' 有 ' + vote[x] + ' 票;';
          });
          component = document.getElementById('txt_info');
          clear_element(component);
          component.appendChild(document.createTextNode(m));
          component = document.getElementById('view_vote');
          component.classList.add('hide');
       });

       $('btn_test_play').on('click', function () {
          play_sound(document.getElementById('sound_bar'));
       });

       function start_one_role_monitor() {
          ajax({
             url: '/api/werewolf/acting'
          }, function (state) {
             if (state.cur === 'x') {
                component = document.getElementById('btn_werewolf');
                if (!env.config) env.config = {};
                if (env.config.T) {
                   component.innerHTML = '狼人';
                } else {
                   component.innerHTML = '狼人(' + state.werewolf_count + ')';
                }
             }
             if (state.start_one_role === 0) {
                play_sound(document.getElementById('sound_bar'), 'play.wav');
             } else {
                setTimeout(start_one_role_monitor, 1000);
             }
          }, function () {
             setTimeout(start_one_role_monitor, 3000);
          });
       }

       $('btn_init').on('click', state_set_factory(' '));
       $('btn_daylight').on('click', state_set_factory('-'));
       $('btn_theif').on('click', state_set_factory('T'));
       $('btn_cupid').on('click', state_set_factory('Q'));
       $('btn_wildchild').on('click', state_set_factory('U'));
       $('btn_werewolf').on('click', state_set_factory('x'));
       $('btn_greedywolf').on('click', state_set_factory('g'));
       $('btn_infectwolf').on('click', state_set_factory('i'));
       $('btn_seer').on('click', state_set_factory('S'));
       $('btn_witch').on('click', state_set_factory('W'));
       $('btn_guard').on('click', state_set_factory('G'));
       $('btn_crow').on('click', state_set_factory('C'));
       $('btn_fluteman').on('click', state_set_factory('f'));
       $('btn_sisters').on('click', state_set_factory('D'));
    </script>
  </body>
</html>
